<template>
  <div id="chart" style="width: 300px;height: 300px;margin-left: 70px">
  </div>
</template>

<script>
  export default {
    name: 'pieCharts',
    mounted() {
      this.initCharts()
    },
    methods: {
      initCharts() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('chart'))

        var option = {
          title: {
            text: '南丁格尔玫瑰图',
            subtext: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            left: 'center',
            top: 'right',
            data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
          },
          series: [

            {
              name: '面积模式',
              type: 'pie',
              radius: [30, 110],
              center: ['50%', '50%'],
              roseType: 'area',
              data: [
                { value: 10, name: 'rose1' },
                { value: 5, name: 'rose2' },
                { value: 15, name: 'rose3' },
                { value: 25, name: 'rose4' },
                { value: 20, name: 'rose5' },
                { value: 35, name: 'rose6' },
                { value: 30, name: 'rose7' },
                { value: 40, name: 'rose8' }
              ]
            }
          ]
        }
        myChart.setOption(option)
      }
    }
  }
</script>

<style scoped>

</style>
